<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆</title>
  <script type="text/javascript" src="../vue.js"></script>
  <script type="text/javascript" src="../vue-resource.js"></script>
  <script src="../layui.js"></script>
  <link rel="stylesheet" href="../css/layui.css" id="layui">
  
  <style>
  	.window{  

	    width: 400px;  
	
	    position: absolute;  
	
	    margin-left: -200px;  
	
	    margin-top: -80px;  
	
	    top: 30%;  
	
	    left: 50%;  
	
	    display: block;  
	
	    z-index: 2000;  
	
	     background: #fff;
	
	    padding: 20 0;
	
	} 
	
	.title {
		text-align: center;
	    font-size: 20px;
	    padding-top: 30px;
	}
  
  </style>
  
</head>
<body style="background: #f1f1f1;">

<div class="window">
	<div class="title">登陆界面</div>
<form  class="layui-form" method="post">
  
  <div class="layui-form-item" style="margin-right: 100px;margin-top: 20px;">

    <label class="layui-form-label">用户名：</label>

    <div class="layui-input-block">

      <input type="text" id="name" name="user" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

    </div>

  </div>

  <div class="layui-form-item" >

    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>

    <div class="layui-input-inline">

      <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
 
    </div>
     
  </div>
  
  <div class="layui-form-item" id="authBox" >
			    <label class="layui-form-label">权限</label>
					<div class="layui-input-block"  style="width:190px">
				       <select name="auth" id="auth" lay-verify="required" lay-search="">
				          <option value="注册用户">注册用户</option>
				          <option value="管理员">管理员</option>
	          			</select>
          			</div>
          			
          			<div style="text-align:center;margin:20px;">
          				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          			我要<a href="javascript:reg();" >注册</a></div>
			  </div>
  
  

  
    

  <div class="layui-form-item">



<!-- <div style="margin-left: 50px;margin-bottom: 10px;" class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>保持登录7天</span><i class="layui-icon"></i></div> -->

    <div style="text-align: center;">

      <input type="button" id="loginBtn" onclick="login()" class="layui-btn"  value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录"/>
      <input type="button" style="display:none" id="regBtn" onclick="handleReg()" class="layui-btn"  value="注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册"/>

    </div>

  </div>

</form>

 </div>
 
 <script type="text/javascript">
   
 function reg(){
	 $('.title').html('注册界面');
	 $('#authBox').hide();
	 $('#regBtn').show();
	 $('#loginBtn').hide();
	 
 }
 
 
 function handleReg(){
	 var name = document.getElementById('name').value;
	 var password = document.getElementById('password').value;
	 $.post('/user/reg.do',{
			name : name,
			password : password,
		},function(data){
			console.log('receive from java:');
			console.log(data);
			
			if(data.code < 0) {
				alert(data.errMsg);
				return;
			}else{
				alert("注册成功！");
				location.href = "/front/login.jsp";
			}
			
		},'json')
 }
 
   //主动加载jquery
 layui.use(['jquery', 'layer'], function(){ 
	  window.$ = layui.$ //重点处
	  ,layer = layui.layer;
	  $('#regBtn').hide();
	  //后面就跟你平时使用jQuery一样 
	  //$('body').append('hello jquery');
	});
 	
 	new Vue({
 		el : '.window' ,
 		data : {
			auth : "" 			
 		}
 	});
 
 	
	layui.use('form', function(){
		var name = document.getElementById('name').value;
		var password = document.getElementById('password').value;
		
  	});
	
	
	
	function login(){
		var name = document.getElementById('name').value;
		var password = document.getElementById('password').value;
		var auth = $('#auth').next().find('.layui-input').eq(0).val();
		
		if(!name){
			alert("用户名不允许为空！");
			return;
		}
		if(!password){
			alert("密码不允许为空！");
			return;
		}
		
		$.post('/user/login.do',{
			name : name,
			password : password,
			auth : auth
		},function(data){
			console.log('receive from java:');
			console.log(data);
			
			if(data.code < 0) {
				alert(data.errMsg);
				return;
			}else if(data.code == 1){
				location.href = "/front/index.do";
			}else{
				location.href = "/#/";
			}
			
		},'json')
		
	}
 </script>
 
   

</body>
</html>